/* eslint-disable react-hooks/rules-of-hooks */
import { uid } from '@/utils';
import { useState, useEffect } from 'react';
import classNames from 'classnames';
import React, { useRef } from 'react';
import { accSub, accAdd } from '@/utils/math';
import ReactDOM from 'react-dom';
import numeral from 'numeral';
import { allGet } from '@/services/pc';
import styles from './index.less';

/**
 * description: 分期计算
 * @param  total 总共支付的钱
 * @param feeRate 费率
 * @param num 期数
 */
const fqFn = (total, feeRate, num) => {
  // 每期要付的钱
  const eachPay = Math.round((100 * total * (1 + feeRate / 100)) / num) / 100;
  // 总共的手续费
  const totalFeeRate = Math.round((100 * total * feeRate) / 100) / 100;
  // 总共要付的钱
  const totalPay = (eachPay * num).toFixed(2);

  return {
    eachPay,
    totalFeeRate,
    totalPay,
  };
};
// const fqipay_count = (data) => {
//     data.fqipay_eachFee = Math.round(100 * data.needpay * (1 + data.fqipay_tax / 100) / data.fqipay_qi) / 100;
//     data.fqipay_needpay = (data.fqipay_eachFee * data.fqipay_qi).toFixed(2);
//     console.log(data.fqipay_serviceFee);
// }

interface OriginPaySuccessProps {
  container?: HTMLElement;
  visible: boolean;
  defaultIndex?: number;
  /**
   * 1 正常
   * 2 显示实名认证
   * 3 显示签署合同
   */
  type: 1 | 2 | 3;
  data?: any;
  payResultData?: any;
  classDetail?: any;
  onClose?: () => void;
  destroyOnClose?: boolean;
  onAuth?: () => void;
  onSign?: () => void;
  onGoCourse: () => void;
  onGoInvoice?: () => void;
}

const OriginPaySuccess: React.FC<OriginPaySuccessProps> = ({
  type,
  container = document.body,
  visible,
  data,
  classDetail,
  payResultData = {},
  onClose,
  destroyOnClose = false,
  onGoCourse: propsOnGoCourse,
  onGoInvoice,
  onSign,
  onAuth,
}) => {
  if (destroyOnClose && !visible) {
    return null;
  }

  const handleAuth = () => {
    onClose?.();
    onAuth?.();
  };

  const handleSign = () => {
    onClose?.();
    onSign?.();
  };

  // 如果有赠品的文案
  let zpTest = '';
  if (
    classDetail?.rewards?.type === 'gift' &&
    Array.isArray(classDetail?.rewards?.gifts) &&
    classDetail?.rewards?.gifts.length > 0
  ) {
    zpTest = '联系客服，截图购买订单，告知想要的赠品和收货地址';
  }

  // 如果有CG券送的文案
  if (classDetail?.rewards?.type === 'credit' && payResultData?.givegifted == 1) {
    zpTest = '赠品CG券已经转到你的账户';
  }
  const onGoCourse = () => {
    onClose?.(false);
    propsOnGoCourse?.();
  };
  const handInvoice = () => {
    onClose?.(false);
    onGoInvoice?.();
  };
  const content = (
    <div
      className={classNames(styles.paysuccess, styles[`paysuccess-${type}`])}
      style={{ display: visible ? 'block' : 'none' }}
    >
      <i className={styles.mask} onClick={() => onClose?.()} />

      <div className={styles.main}>
        {zpTest && (
          <div className={styles.zptips}>
            <i className={styles.iconGou} />
            {zpTest}
          </div>
        )}
        <i className={styles.success} />
        <div className={styles.title}>支付成功</div>
        <div className={styles.tips}>
          已支付成功
          {type === 2 && <>，请先完成：实名认证</>}
          {type === 3 && <>，请完成：签署合同</>}
        </div>
        {type === 2 && (
          <div className={styles.rz} onClick={handleAuth}>
            实名认证
          </div>
        )}
        {type === 3 && (
          <div className={styles.rz} onClick={handleSign}>
            签署合同
          </div>
        )}
        <div className={styles.kc} onClick={handInvoice}>
          开具发票
        </div>
        <div className={styles.kc} onClick={onGoCourse}>
          查看课程
        </div>
        <img
          className={styles.close}
          src={require('./images/icon-close.png')}
          alt=""
          onClick={() => onClose?.()}
        />
      </div>
    </div>
  );

  return ReactDOM.createPortal(
    // 这里可以是dom元素,也可以是react组件,还可以是react节点
    content,
    // 将传入的元素/组件/节点,挂载到container下面
    container,
  );
};

const show = (
  options: Pick<
    OriginPaySuccessProps,
    | 'data'
    | 'onClose'
    | 'type'
    | 'onAuth'
    | 'onGoCourse'
    | 'onGoInvoice'
    | 'onSign'
    | 'classDetail'
    | 'payResultData'
  > = {} as any,
) => {
  const { onClose } = options || {};
  const container = document.createElement('div');
  container.setAttribute('id', uid() + '' + Date.now());
  document.body.appendChild(container);
  const handleClose = (tirgger) => {
    if (tirgger !== false) {
      onClose?.();
    }
    ReactDOM.unmountComponentAtNode(container);
    document.body.removeChild(container);
  };
  ReactDOM.render(
    <OriginPaySuccess
      {...options}
      container={container}
      visible={true}
      destroyOnClose
      onClose={handleClose}
    />,
    container,
  );
};

type PaySuccessType = typeof OriginPaySuccess & {
  show: typeof show;
};
export const PaySuccess = OriginPaySuccess as PaySuccessType;
PaySuccess.show = show;

interface OriginPayCodeProps {
  title?: string;
  type: 'alipay' | 'wxpay' | 'wxcode';
  container?: HTMLElement;
  visible: boolean;
  defaultIndex?: number;
  data: { money?: any; qrCode: string };

  onClose?: () => void;
  onSuccess?: () => void;
  onLoad?: () => void;
  destroyOnClose?: boolean;
}

export const OriginPayCode: React.FC<OriginPayCodeProps> = ({
  type,
  container = document.body,
  visible,
  data = {},
  onClose,
  destroyOnClose = false,
  onSuccess,
  onLoad,
  title,
}) => {
  if (destroyOnClose && !visible) {
    return null;
  }
  const handleOk = () => {
    onClose?.();
    onSuccess?.();
  };

  const content = (
    <div
      className={classNames(styles.paycode, styles[type])}
      style={{ display: visible ? 'block' : 'none' }}
    >
      <i className={styles.mask} onClick={() => onClose?.()} />
      <div className={styles.main}>
        <div className={styles.header}>
          {title ? title : type !== 'wxpay' ? '支付宝支付' : '微信支付'}
          {type !== 'wxcode' && (
            <div className={styles.tips}>请尽快完成支付，以免支付二维码过期导致无法支付</div>
          )}
        </div>
        <div className={styles.body}>
          {type !== 'wxcode' && <div className={styles.money}>¥{data.money}</div>}
          {type !== 'wxcode' && <div>实付</div>}
          <img loading="lazy" className={styles.code} src={data.qrCode} alt="" />
          {type !== 'wxcode' && (
            <div className={styles.ok} onClick={handleOk}>
              已完成购买
            </div>
          )}
        </div>
        <img
          className={styles.close}
          src={require('./images/icon-close.png')}
          alt=""
          onClick={() => onClose?.()}
        />
      </div>
    </div>
  );
  useEffect(() => {
    onLoad?.();
  }, []);
  return ReactDOM.createPortal(
    // 这里可以是dom元素,也可以是react组件,还可以是react节点
    content,
    // 将传入的元素/组件/节点,挂载到container下面
    container,
  );
};

const showPayCode = (
  options: Pick<OriginPayCodeProps, 'data' | 'onClose' | 'onSuccess' | 'type'>,
) => {
  const { data, type, onClose, onSuccess } = options || {};
  const container = document.createElement('div');
  const id = uid() + '' + Date.now();
  container.setAttribute('id', id);
  document.body.appendChild(container);
  const handleClose = (trigger = true) => {
    if (trigger) {
      onClose?.();
    }
    ReactDOM.unmountComponentAtNode(container);
    if (document.getElementById(id)) {
      document.body.removeChild(container);
    }
  };
  ReactDOM.render(
    <OriginPayCode
      data={data}
      type={type}
      container={container}
      visible={true}
      destroyOnClose
      onClose={handleClose}
      onSuccess={onSuccess}
    />,
    container,
  );
  return {
    close: () => handleClose(false),
  };
};

type PayCodeType = typeof OriginPayCode & {
  showPayCode: typeof showPayCode;
};
export const PayCode = OriginPayCode as PayCodeType;
PayCode.showPayCode = showPayCode;

interface PayTypeProps {
  /**
   * 支付方式
   * 1 微信
   * 2 支付宝
   * 3 支付宝先学后付
   */
  type?: (1 | 2 | 3)[];
  /**
   * 分期选项
   *
   * num 期数
   * feeRate 费率, 4 代表 4%
   */
  fqOptions?: { num: number; feeRate: any }[];

  /**
   * 支付总价
   */
  totalPay: any;

  onChange?: (totalPay: any, payType: 'wxpay' | 'alipay' | 'fqipay', fqiNum?: number) => void;
}
const PayType: React.FC<PayTypeProps> = ({
  type = [1, 2, 3],
  fqOptions = [],
  totalPay,
  onChange,
}) => {
  const [qs, setQs] = useState(0);
  const handleQsClick = (newQs) => {
    setQs(newQs);
  };

  const [index, setIndex] = useState(1);
  const handleClick = (newIndex) => {
    setIndex(newIndex);
    if (newIndex !== 3) {
      setQs(0);
    }
  };

  useEffect(() => {
    // 不用分期的价格
    if (index === 1 || index === 2) {
      onChange?.(totalPay, index === 1 ? 'wxpay' : 'alipay');
    }
    if (index === 3) {
      const { num, feeRate } = fqOptions[qs];
      const { totalPay: newTotalPay } = fqFn(totalPay, feeRate, num);
      onChange?.(newTotalPay, 'fqipay', num);
      // // 手续费0的价格
      // if (feeRate == 0) {
      //   onChange?.(totalPay, 'fqipay', num);
      // }
      // // 手续费不是0的价格
      // else {
      //   const { totalPay: newTotalPay } = fqFn(totalPay, feeRate, num);
      //   onChange?.(newTotalPay, 'fqipay', num);
      // }
    }
  }, [index, qs, totalPay]);

  return (
    <div className={styles.paytype}>
      {type.includes(1) && (
        <div
          onClick={() => handleClick(1)}
          className={classNames(styles.item, { [styles.actived]: index === 1 })}
        >
          <i className={styles.check} />
          <i className={styles.icon} />
          <span className={styles.text}>微信支付</span>
        </div>
      )}
      {/*      {type.includes(2) && (
        <div
          onClick={() => handleClick(2)}
          className={classNames(styles.item, { [styles.actived]: index === 2 })}
        >
          <i className={styles.check} />
          <i className={classNames(styles.icon, styles.ali)} />
          <span className={styles.text}>支付宝支付</span>
        </div>
      )} */}
      {type.includes(3) && fqOptions.length > 0 && (
        <div
          onClick={() => handleClick(3)}
          className={classNames(styles.item, styles.xw, { [styles.actived]: index === 3 })}
        >
          <i className={styles.check} />
          <i className={classNames(styles.icon, styles.ali)} />
          <span className={styles.text}>支付宝先学后付</span>
          <div className={styles.options}>
            {fqOptions.map((item, index) => {
              const { eachPay, totalFeeRate } = fqFn(totalPay, item.feeRate, item.num);
              return (
                <div
                  key={item.num}
                  className={classNames(styles.option, { [styles.actived]: index === qs })}
                  onClick={() => handleQsClick(index)}
                >
                  <div className={styles.num}>
                    ¥{eachPay} x {item.num}期
                  </div>
                  <div className={styles.sxf}>手续费：¥{totalFeeRate}</div>
                  <i className={styles.optionicon} />
                </div>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
};

interface OriginOrderPayModalProps {
  container?: HTMLElement;
  type: 'package' | 'dlc' | 'course';
  visible: boolean;
  defaultIndex?: number;
  data?: any[];
  onClose?: () => void;
  onPay?: (data: {
    payMoney: any;
    payType: 'wxpay' | 'alipay' | 'fqipay';
    fqiNum?: number;
    useBalance: boolean;
    balance: any;
    laxCode;
    secskill?: any;
  }) => Promise<void>;
  destroyOnClose?: boolean;
  width?: number;
  /**
   * 支付方式
   * 1 微信
   * 2 支付宝
   * 3 支付宝先学后付
   */
  payType?: PayTypeProps['type'];
  /**
   * 原价合计
   */
  originalPrice: number;
  /**
   * 支付价格合计
   */
  payPrice?: number;
  /**
   * 优惠券
   */
  coupon?: number;
  /**
   * 余额
   */
  balance?: any;
  /**
   * 老学员优惠券
   */
  oldStudentCoupon?: number;
  /**
   * 是否可用余额支付
   */

  availableBalance?: boolean;
  /**
   * 分期选项
   *
   * num 期数
   * feeRate 费率, 4 代表 4%
   */
  fqOptions?: PayTypeProps['fqOptions'];
  /**
   * 各种优惠
   */
  coupons?: any;
  /**
   * 秒杀课程带有参数
   */
  secskill?: any;
}

const OriginOrderPayModal: React.FC<OriginOrderPayModalProps> = ({
  type,
  originalPrice,
  coupon = 0,
  oldStudentCoupon = 0,
  availableBalance = true,
  payType,
  container = document.body,
  balance: propsBalance,
  payPrice = 0,
  fqOptions = [],
  visible,
  data = [],
  onClose,
  destroyOnClose = false,
  onPay,
  width = 840,
  coupons = {},
  secskill,
}) => {
  if (destroyOnClose && !visible) {
    return null;
  }
  console.log(data, 222);
  useEffect(() => {
    if (visible === true) {
      window.scrollTo({
        left: 0,
        top: 0,
        // behavior: 'smooth'//或'auto'
      });
    }
  }, [visible]);
  // 计算用
  const [computePayMoney, setComputePayMoney] = useState<any>(payPrice);
  // 显示用
  const [payMoney, setPayMoney] = useState<any>();

  const [useBalance, setUseBalance] = useState(false);
  const [balance, setBalance] = useState(propsBalance);

  const [deductionBalance, setDeductionBalance] = useState<any>(0);
  const calculationPayMoney = () => {
    // 已经传了最终支付价格，就和余额做对比就行
    // payPrice = 23200 + 1000;
    if (payPrice !== undefined) {
      let result = payPrice as any;
      // 老带新邀请码优惠
      if (laxCouponRef.current) {
        result = accSub(result, laxCouponRef.current);
      }
      // 使用余额抵扣
      if (useBalance) {
        result = accSub(result, balance);
        // 余额大于支付价格
        if (parseFloat(result) < 0) {
          // 余额抵扣就显示要支付的全部价格
          setDeductionBalance(accSub(payPrice, laxCouponRef.current));
        }
        // 余额小于支付价格
        else {
          // 余额抵扣就显示全部的余额
          setDeductionBalance(balance);
        }
      }

      setComputePayMoney(result <= 0 ? 0 : result);
    }
    // // 其他给了原价之类的，就做计算
    // else {
    //     let str: any = [originalPrice, coupon, oldStudentCoupon].reduce((a, b) => accSub(a, b) as any);
    //     // accSub
    //     // let str = originalPrice - coupon - oldStudentCoupon;
    //     if (useBalance) {
    //         str = accSub(str, balance);
    //     }
    //     setComputePayMoney(str);
    // }
  };
  useEffect(() => {
    calculationPayMoney();
  }, [useBalance]);

  const payTypeRef = useRef<any>('wxpay');
  const fqiNumRef = useRef(0);
  const onPayTypeChange = (totalPay, payType, fqiNum) => {
    setPayMoney(totalPay);
    payTypeRef.current = payType;
    fqiNumRef.current = fqiNum;
  };

  const handlePay = () => {
    onClose?.();
    onPay?.({
      payMoney,
      payType: payTypeRef.current,
      fqiNum: fqiNumRef.current,
      useBalance,
      balance: deductionBalance,
      laxCode: laxCode.current,
      secskill,
    });
  };

  // 老拉新优惠码

  const [laxCoupon, setlaxCoupon] = useState(0);
  const [laxCouponIsOk, setlaxCouponIsOk] = useState<any>(null);
  const laxCouponRef = useRef(0);
  const laxCode = useRef('');
  const laxCodeChange = (e) => {
    setlaxCouponIsOk(null);
    laxCode.current = e.target.value;
    setlaxCoupon(0);
    laxCouponRef.current = 0;
    calculationPayMoney();
  };
  // 验证老拉新邀请码
  const checkLaxCode = async () => {
    const response = await allGet({
      params: {
        mod: 'train',
        do: 'checkinvitecode',
        code: laxCode.current,
        version: 'pc1.0',
        classid: data?.[0]?.classid,
      },
    });

    if (response.success) {
      const num = response.data.reduce;
      if (num !== null) {
        setlaxCouponIsOk(true);
      } else {
        setlaxCouponIsOk(false);
      }
      if (num > 0) {
        setlaxCoupon(num);
        laxCouponRef.current = num;
        calculationPayMoney();
      } else {
        setlaxCoupon(0);
        laxCouponRef.current = 0;
        calculationPayMoney();
      }
    } else {
      setlaxCouponIsOk(false);
      setlaxCoupon(0);
      laxCouponRef.current = 0;
      calculationPayMoney();
    }
    // if (response.success && response.data > 0) {
    //   setlaxCoupon(response.data);
    //   laxCouponRef.current = response.data;
    //   calculationPayMoney();
    // } else {
    //   setlaxCoupon(0);
    //   laxCouponRef.current = 0;
    //   calculationPayMoney();
    // }
  };

  console.log(coupons, 111);

  const isMiao = !!secskill?.sid;
  console.log(isMiao, secskill, 'secskill');
  const renderlaxCoupon = () => {
    if (laxCouponIsOk === null) return;
    if (laxCouponIsOk) {
      if (laxCoupon === 0) {
        return <span className={styles.tips}>此邀请码已生效</span>;
      }
      return <span className={styles.tips}>已通过邀请码，优惠{laxCoupon}元。</span>;
    }
    return <span className={styles.tips}>无效邀请码</span>;
  };
  const content = (
    <div
      className={classNames(styles.orderPayModal, styles[`orderPayModal-${type}`])}
      style={{ display: visible ? 'block' : 'none' }}
    >
      <i className={styles.mask} onClick={() => onClose?.()} />
      <div className={styles.main} style={{ width }}>
        <div className={styles.modaltitle}>确认订单信息</div>

        {data && data.length > 0 && (
          <div className={styles.spWrapper}>
            <div className={styles.header}>
              <span className={styles.nameCol}>商品</span>
              <span className={styles.opriceCol}>价格</span>
              <span className={styles.priceCol}>实付</span>
            </div>
            <div className={styles.body}>
              {data.map((item) => {
                return (
                  <>
                    <div className={styles.item} key={item.scid}>
                      <div className={styles.nameCol}>
                        <img loading="lazy" className={styles.img} src={item.thumb} alt="" />
                        {(type === 'course' || type === 'package') && (
                          <div className={styles.info}>
                            <div className={styles.title}> {item.name}</div>
                            <div className={styles.des}>
                              <span>正式课：{item.lessonnum}节</span>追加课：{item.addlessonnum}节
                            </div>
                          </div>
                        )}
                        {type === 'dlc' && (
                          <div className={styles.info}>
                            <div className={styles.title}> 追加课：</div>
                            <div className={styles.title}> {item.name}</div>
                          </div>
                        )}
                      </div>
                      <div className={styles.opriceCol}>
                        <div className={styles.price}>¥{item.oldprice}</div>
                      </div>
                      <div className={styles.priceCol}>
                        <div className={styles.price}>¥{item.price}</div>
                      </div>
                    </div>
                    {item?.addlessonlist?.length > 0 && (
                      <div className={styles.zuijia}>
                        <i className={styles['icon-zuijia']} />
                        课程内含有 {item?.addlessonlist?.length}节 付费{' { 追加课 } '} ，售价为：
                        {item?.addlessonlist?.map((itema) => `¥${itema.unlocks}`).join('、')} （
                        后续单独进行购买 ）
                      </div>
                    )}
                  </>
                );
              })}
            </div>
          </div>
        )}

        <div className={styles.payTypeWrapper}>
          <div className={styles.title}>支付方式</div>
          <PayType
            type={payType}
            fqOptions={fqOptions}
            totalPay={computePayMoney}
            onChange={onPayTypeChange}
          />
          {availableBalance && (
            <div className={styles.yeWrapper}>
              <div className={styles.title}>学习币</div>
              <div className={styles.row}>
                <i
                  className={classNames(styles.check, { [styles.actived]: useBalance })}
                  onClick={() => setUseBalance(!useBalance)}
                />
                可用学习币：
                <span className={styles.text}>¥{balance}</span>
              </div>
            </div>
          )}
        </div>
        {type === 'course' && !isMiao && (
          <div className={styles.ldxCouponWrapper}>
            <div className={styles.inputWrapper}>
              <input
                className={styles.innerinput}
                placeholder="如果有人邀请你，请输入邀请码"
                onChange={laxCodeChange}
              />
              <div className={styles.submit} onClick={checkLaxCode}>
                提交
              </div>
            </div>
            {renderlaxCoupon()}
          </div>
        )}
        <div className={styles.footer}>
          <div className={styles.list}>
            {type !== 'course' && (
              <span className={classNames(styles.item, styles.originalPrice)}>
                合计：{originalPrice}
              </span>
            )}
            {type === 'course' && coupons?.coupon > 0 && (
              <span className={styles.item}>特殊券:-{coupons.coupon} </span>
            )}
            {type === 'course' && laxCoupon > 0 && (
              <span className={styles.item}>老带新:-{laxCoupon}</span>
            )}
            {type === 'course' && coupons?.common > 0 && (
              <span className={styles.item}>通用券:-{coupons.common}</span>
            )}
            {type === 'course' && coupons?.student > 0 && (
              <span className={styles.item}>老学员:-{coupons.student}</span>
            )}
            {type === 'course' && coupons?.share > 0 && (
              <span className={styles.item}>分享优惠:-{coupons.share}</span>
            )}
            {useBalance && balance > 0 && (
              <span className={styles.item}>学习币抵扣：-{deductionBalance}</span>
            )}
          </div>
          <div
            className={classNames(styles.pay, { [styles.paymiao]: isMiao })}
            onClick={() => handlePay()}
          >
            实付：¥ {numeral(payMoney).format('0,0.00')}
            <i className={styles.line} />
            <span className={styles.text}>立即支付</span>
          </div>
        </div>

        <img
          className={styles.close}
          src={require('./images/icon-close.png')}
          alt=""
          onClick={() => onClose?.()}
        />
      </div>
    </div>
  );
  return ReactDOM.createPortal(
    // 这里可以是dom元素,也可以是react组件,还可以是react节点
    content,
    // 将传入的元素/组件/节点,挂载到container下面
    container,
  );
};

// 显示订单弹窗
const showOrderPay = (
  options: Pick<
    OriginOrderPayModalProps,
    | 'type'
    | 'data'
    | 'onClose'
    | 'onPay'
    | 'payType'
    | 'width'
    | 'originalPrice'
    | 'coupon'
    | 'oldStudentCoupon'
    | 'availableBalance'
    | 'balance'
    | 'payPrice'
    | 'fqOptions'
    | 'coupons'
    | 'secskill'
  >,
) => {
  const {
    data = [],
    type,
    onClose,
    onPay,
    payType,
    width,
    originalPrice,
    coupon,
    oldStudentCoupon,
    availableBalance,
    balance,
    payPrice,
    fqOptions,
    coupons,
    secskill,
  } = options || {};
  const container = document.createElement('div');
  container.setAttribute('id', uid() + '' + Date.now());
  document.body.appendChild(container);
  const handleClose = () => {
    onClose?.();
    ReactDOM.unmountComponentAtNode(container);
    document.body.removeChild(container);
  };
  ReactDOM.render(
    <OriginOrderPayModal
      type={type}
      data={data}
      originalPrice={originalPrice}
      coupon={coupon}
      oldStudentCoupon={oldStudentCoupon}
      availableBalance={availableBalance}
      balance={balance}
      fqOptions={fqOptions}
      coupons={coupons}
      secskill={secskill}
      container={container}
      visible={true}
      destroyOnClose
      onClose={handleClose}
      payType={payType}
      payPrice={payPrice}
      width={width}
      onPay={onPay}
    />,
    container,
  );
};

type OrderPayModalType = typeof OriginOrderPayModal & {
  showOrderPay: typeof showOrderPay;
};
const OrderPayModal = OriginOrderPayModal as OrderPayModalType;
OrderPayModal.showOrderPay = showOrderPay;

export default OrderPayModal;
